<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
    <div class="hp-tips">
        <p>请保持您的手机处于屏幕锁屏状态</p><img src="img/lock.png">
    </div>
    <div class="audio" style="display:none; height: 0;width: 0;">
        <audio style="display:none; height: 0" id="bg-music" preload="auto" src="av/test.mp3" loop="loop"></audio>
    </div>
    <div class="preview">
        <div class="video-con">
            <video src="http://test.likes.com.cn/Public/training/av/v4.mp4" class="video" id="js-video" preload="true" x5-video-player-type="h5" poster="" x5-video-player-fullscreen="true" webkit-playsinline="true" playsinline="true" x-webkit-playsinline="true" style="object-fit: fill;object-position: center center;"></video>
        </div>
        <div class="play show" id="play"><div class="img"><img src="img/icon_play.png"></div></div>
        <div class="qhsj">
            切换视角
        </div>
        <div class="video-control">
            <img class="fill" src="img/icon_zt.png">
            <img class="fill" src="img/icon_bf.png">
        </div>
        <div class="pro-bar">
            <div class="bar-num">
            </div>
            <div class="bar-btn">
                <a class="prev"><img src="img/icon_p.png">上一组</a>
                <span class="actionTitle">横向跨步：6次</span>
                <a class="next">下一组<img src="img/icon_n.png"></a>
            </div>
        </div>
        <div class="count-down">
            <p>稍作休息，开始下一组动作</p>
            <div class="num">0</div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jweixin-1.0.0.js"></script>
<script src="js/app.js"></script>
<script>
    var video = document.getElementById('js-video');
    var playBtn = document.getElementById('play');
    //actionList-课程动作  name-课程动作标题  times-课程动作频度  actions - 一个动作的视频列表 actions-time 视频时间（毫秒） actions-src 视频地址
    var courseList =[
        {name:'1横向跨步',times:6,countDown:3,actions:[{time:1700,src:'http://test.likes.com.cn/Public/training/av/v4.mp4'},{time:1700,src:'http://test.likes.com.cn/Public/training/av/v5.mp4'},{time:1700,src:'http://test.likes.com.cn/Public/training/av/v4.mp4'},{time:1700,src:'http://test.likes.com.cn/Public/training/av/v5.mp4'}]},
        {name:'2横向跨步',times:6,countDown:3,actions:[{time:1700,src:'http://test.likes.com.cn/Public/training/av/v5.mp4'},{time:1700,src:'http://test.likes.com.cn/Public/training/av/v5.mp4'}]}
    ];
    var courseNum = courseList.length;  //当前课程动作数
    var courseIndex = 0; //当前播放课程
    var actionIndex = 0; //当前播放动作
    var countDown = courseList[courseIndex].countDown;// 倒计时
    $(".video-control").addClass('show');
    $(".pro-bar").addClass('show');
    //设置视频全屏
    function setSize(){
        var size = {width:1028,height:640};
        var Wwidth = $(window).width();
        var Wheight = $(window).height();
        var scale = (Wheight/Wwidth)/(size.width/size.height);
        $('.preview').css({width:Wheight,height:Wwidth,top:(Wheight-Wwidth)/2,left:0-(Wheight-Wwidth)/2});
        $('.video').css({'transform':'translate(-50%,-50%) scale('+scale+')','-webkit-transform':'translate(-50%,-50%) scale('+scale+')',width:Wheight});
    }
    setSize();
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",setSize, false);
    window.addEventListener('resize',function(){
        setSize();
    });
    //设置进度条
    progressBar();
    function progressBar(){
        var html = '';
        for(var i =0;i < courseNum;i++){
            html += '<span style="width: '+(100/courseNum)+'%"></span>'
        }
        $('.bar-num').append(html);
    }
    //默认初始话
    init();
    function init(){
        if(courseList[courseIndex].actions[actionIndex].src != video.src){
            video.src = courseList[courseIndex].actions[actionIndex].src;
        }
        $('.actionTitle').text(courseList[courseIndex].name +"："+courseList[courseIndex].times+'次');
        $('.bar-num span').removeClass('on');
        for(var i = 0;i< courseIndex+1;i++){
            $('.bar-num span').eq(i).addClass('on');
        }
        if(courseIndex == 0){
            $(".prev").addClass('hide');
        }else{
            $(".prev").removeClass('hide');
        }
        if(courseIndex == courseList.length -1){
            $(".next").addClass('hide');
        }else{
            $(".next").removeClass('hide')
        }
    }
    //倒计时
    var interval;
    function coundown(){
        countDown = courseList[courseIndex].countDown;
        $('.count-down .num').text(countDown);
        if(courseList[courseIndex].countDown == 0){
            $('.count-down').removeClass('show');
        }else{
            $('.count-down').addClass('show');
            interval = setInterval(function(){
                if(countDown == 0){
                    clearInterval(interval);
                    $('.count-down').removeClass('show');
                    playVideo();
                }
                $('.count-down .num').text(countDown--);
            },1000)
        }
    }
    document.addEventListener("WeixinJSBridgeReady",function(){
        if(window.netease.ua.ios) {
            $(".play").removeClass('show');
            video.play();
            checkVideo();
        }
    }, false);
    video.addEventListener('click',function(){
        $(".play").removeClass('show');
        video.play();
        checkVideo();
    });
    playBtn.addEventListener('click',function(){
        $(".play").removeClass('show');
        video.play();
        checkVideo();
    });
    if(window.netease.ua.ios){
        playVideo();
    }
    function playVideo(){
        $(".play").removeClass('show');
        video.play();
        checkVideo();
    }
    //视频结束执行
    $('.video').on('ended', function() {
        console.log('当前动作播放结束');
        actionIndex++;
        if(actionIndex == (courseList[courseIndex].actions.length)){
            if(courseIndex == courseList.length -1 ){
                window.location.href='courseend.html';
                return;
            }else{
                console.log('当前课程');
                courseIndex++;
                actionIndex = 0;
                init();
                coundown();
            }
        }else{
            init();
			if(courseList[courseIndex].actions[actionIndex].src != video.src){
				$('.qhsj').addClass('show');
				setTimeout(function(){
					$('.qhsj').removeClass('show');
				},3000);
			}
            setTimeout(function(){
                playVideo();
            },200)
        }
    });
    //下一组
    $(".next").on('click',function(){
        if(courseIndex == courseList.length -1) return;
        courseIndex++;
        actionIndex = 0;
        init();
        coundown();
    });
    //上一组
    $(".prev").on('click',function(){
        if(courseIndex == 0) return;
        courseIndex--;
        actionIndex = 0;
        init();
        coundown();
    });
    //左上角播放按钮
    checkVideo();
    function checkVideo(){
        if(video.paused){
            $('.video-control').removeClass('isplay').addClass('ispause')
        }else{
            $('.video-control').removeClass('ispause').addClass('isplay')
        }
    }
    $('.video-control').on('click',function(){
        if(video.paused){
            playVideo();
            $('.video-control').removeClass('ispause').addClass('isplay')
        }else{
            video.pause();
            $('.video-control').removeClass('isplay').addClass('ispause')
        }
    });
    // 音乐播放
    autoPlayMusic();
    function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);
        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    function musicPlay(isPlay) {
        var media = document.querySelector('#bg-music');
        if (isPlay && media.paused) {
            media.play();
        }
        if (!isPlay && !media.paused) {
            media.pause();
        }
    }
</script>
</body>
</html>